<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>art_cate</title>
		<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="../assets/css/article/art_cate.css" />
	</head>
	<body>
		<!-- 卡片区域 -->
		<div class="layui-card">
			<div class="layui-card-header">
				<span>文章类别管理</span>
				<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="btnAddCate">添加类别</button>
			</div>
			<div class="layui-card-body">
				<table class="layui-table">
					<colgroup>
						<col width="150" />
						<col />
						<col />
						<col width="200" />
					</colgroup>
					<thead>
						<tr>
							<th>序号</th>
							<th>分类名称</th>
							<th>分类别名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
					<!-- 表格数据模板 -->
					<script type="text/html" id="tpl-table">
						{{each data}}
						<tr>
							<td>{{$index+1}}</td>
							<td>{{$value.name}}</td>
							<td>{{$value.alias}}</td>
							<td>
								<button type="button" class="layui-btn layui-btn-xs" id="btn-edit" data-id="{{$value.Id}}">编辑</button>
								<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" data-id="{{$value.Id}}" id="btn-delete">删除</button>
							</td>
						</tr>
						{{/each}}
					</script>
					<!-- 添加form表单域 -->
					<script type="text/html" id="dialog-add">
						<form class="layui-form" id="form-add">
							<div class="layui-form-item">
								<label class="layui-form-label">分类名称</label>
								<div class="layui-input-block">
									<input
										type="text"
										name="name"
										required
										lay-verify="required"
										placeholder="请输入分类名称"
										autocomplete="off"
										class="layui-input"
									/>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">分类别名</label>
								<div class="layui-input-block">
									<input
										type="text"
										name="alias"
										required
										lay-verify="required"
										placeholder="请输入分类别名"
										autocomplete="off"
										class="layui-input"
									/>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
									<button type="reset" class="layui-btn layui-btn-primary">重置</button>
								</div>
							</div>
						</form>
					</script>
					<!-- 修改类的弹窗 -->
					<script type="text/html" id="dialog-edit">
						<form class="layui-form" id="form-edit" lay-filter="form-edit">
							<!-- 隐藏域，保存 Id 的值 -->
							<input type="hidden" name="Id" />
							<div class="layui-form-item">
								<label class="layui-form-label">分类名称</label>
								<div class="layui-input-block">
									<input
										type="text"
										name="name"
										required
										lay-verify="required"
										placeholder="请输入分类名称"
										autocomplete="off"
										class="layui-input"
									/>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">分类别名</label>
								<div class="layui-input-block">
									<input
										type="text"
										name="alias"
										required
										lay-verify="required"
										placeholder="请输入分类别名"
										autocomplete="off"
										class="layui-input"
									/>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
									<button type="reset" class="layui-btn layui-btn-primary">重置</button>
								</div>
							</div>
						</form>
					</script>
				</table>
			</div>
		</div>
		<script src="../assets/lib/jquery.js"></script>
		<script src="../assets/lib/layui/layui.all.js"></script>
		<script src="../assets/lib/template-web.js"></script>
		<script src="../assets/js/baseAPI.js"></script>
		<script src="../assets/js/article/art_cate.js"></script>
	</body>
</html>
